<template>
  <view class="share">
    <view class="bg" @click="close">
      <image :src="imgUrl.default" @longpress="saveImage(imgUrl)" class="pc-container-image"></image>
      <view class="pc-container">
        <canvas canvas-id="mycanvas" class="canvas" :style="canvasStyle" v-show="canvasShow"></canvas>
      </view>
      <view class="btn-box" @click="saveImage(imgurl)" v-if="!canvasShow">
        <view class="b-share">保存商品海报</view>
      </view>
    </view>
  </view>
</template>

<script>
import userService from "@/api/user";
import { drawImage, drawText, drawRoundRect, canvasToTempFilePath, saveImage } from "@/utils/canvasUtil";

let myCanvas = null;
// const imgPrefix = "https://cdn.youliao.com/"; //二维码生成的都是正式环境的
export default {
  name: "canvasModal",
  // 标题名称
  imgUrl: {
    type: String,
    default: "",
  },
  data() {
    return {
      imgurl: "",
      canvasShow: true,
      canvasStyle: "width: 750px; height: 1300px",
      attrCommonVoList: [],
      position: {
        background: { x: 0, y: 0, w: 750, h: 1386 },
        storeLogo: { x: 44, y: 1138, w: 48, h: 48, r: 0 },
        storeName: { x: 110, y: 1146 },
        imgUrl: { x: 0, y: 0, w: 750, h: 700, r: 0 },
        goodsTypeImage: { x: 40, y: 800, w: 100, h: 40, r: 0 },
        backLine: { x: 40, y: 0, w: 670, h: 2 },
        commonX: 40,
        baseY: 810,
        // title: { x: 40, y: 850 },
        // name: { x: 40, y: 890 }, //40
        // keyNames: { x: 40, y: 930 }, //40
        // tags: { x: 40, y: 950, h: 30 },
        code: { x: 544, y: 1088, w: 160, h: 160, r: 0 },
        desc: { x: 544, y: 1260 },
        price: { x: 40, y: 730 }
      }
    };
  },

  onHide() {
    uni.removeStorageSync("person-card");
  },
  async created() {
    myCanvas = uni.createCanvasContext("mycanvas", this);
  },
  async mounted() {
    this.open();
  },
  methods: {
    drawImage,
    drawText,
    drawRoundRect,
    canvasToTempFilePath,
    saveImage,
    async getWxaCodeUnLimit() {
      const page = "pages-mall/goods/detail";
      const scene = `goodsId=${this.goodsInfo.id}&isSample=${this.goodsInfo.isSample}`;
      const res = await userService.getWxaCodeUnLimit2({
        page,
        scene,
        createCodeType: 2
      });
      res.data && res.data.data && (this.goodsInfo.codeImage = res.data.data.filePath); // 二维码路径
    },
    close() {
      this.canvasShow = false;
      this.$emit("close");
    },
    async open() {
      try {
        this.canvasShow = true;
        uni.showLoading({ title: "加载中", mask: true });
        await this.getWxaCodeUnLimit();
        await this.draw(this.goodsInfo);
        const { w, h } = this.position.background;
        this.imgurl = await this.canvasToTempFilePath(myCanvas, "mycanvas", this, { w, h });
        this.canvasShow = false;
        uni.setStorageSync("person-card", this.imgurl);
      } catch {
        this.canvasShow = false;
        uni.hideLoading();
      }
    },
    async draw(goodsInfo) {
      myCanvas.fillStyle = "#FFFFFF";
      const { x, y, w, h } = this.position.background;
      myCanvas.fillRect(x, y, w, h); // 背景框
      myCanvas.save();
      myCanvas.restore();
      await this.drawImage(myCanvas, this.baseUrl + goodsInfo.imgUrl, this.position.imgUrl); // 商品图
      this.goodsTypeImage !== null && (await this.drawImage(myCanvas, this.goodsTypeImage, this.position.goodsTypeImage)); // 商品类型 易制爆易制毒
      goodsInfo.price = goodsInfo.priceMin == -1 ? "¥??" : `¥${goodsInfo.priceMin}/${goodsInfo.unitName}`;
      goodsInfo.remark = "由于价格随市场进行调整，图中价格仅供参考";
      goodsInfo.remarkLogo = "https://staticcdn.youliao.com/static/image/www_m/mall/remark_tip.png";

      // code: { x: 544, y: 1088, w: 160, h: 160, r: 0 },

      await this.drawInfo(goodsInfo); // 文字信息

      // this.canvasStyle = "width: 750px;height:" + this.position.baseY + "px";
      // this.position.background.h = this.position.baseY + 20;
    },
    async drawInfo({ price, remark, storeName, title, name, keyNames, codeImage }) {
      const p = this.position;
      let { commonX, baseY } = this.position;
      myCanvas.textAlign = "left";

      // 价格
      myCanvas.font = `40px Arial`;
      myCanvas.fillStyle = "#F0780E";
      this.drawText(myCanvas, price, p.price.x, p.price.y); // 价格

      myCanvas.font = `28px Arial`;
      myCanvas.fillStyle = "#242D4A";
      this.drawText(myCanvas, storeName, p.storeName.x, p.storeName.y); // 店铺名

      myCanvas.font = `32px bold Arial`;
      const titlex = this.goodsTypeImage == null ? commonX : commonX + 120;
      baseY = baseY + this.drawText(myCanvas, title, titlex, 800, 32, this.goodsTypeImage == null ? 720 : 560) + 20; // 商品标题
      console.log(`baseY====`, baseY);
      myCanvas.fillStyle = "#9195A4";
      myCanvas.font = `24px Arial`;
      baseY = baseY + this.drawText(myCanvas, `商品别名：${name}`, commonX, baseY, 24, 690, 24) + 20; // 别名
      baseY = baseY + this.drawText(myCanvas, `规格：${keyNames}`, commonX, baseY, 24, 690, 24) + 20; // 规格
      let startX = commonX;
      myCanvas.font = `20px Arial`;
      for (let j = 0; j < this.attrList.length; j++) {
        myCanvas.fillStyle = "#F2F3F4";
        const str = this.attrList[j];
        const textWidth = Math.ceil(myCanvas.measureText(str).width);
        if (startX + textWidth + 20 > 730) {
          break;
        }

        myCanvas.fillRect(startX, baseY, textWidth + 20, 30); // 规格背景
        myCanvas.fillStyle = "#9195A4";
        this.drawText(myCanvas, str, startX + 10, baseY + 2, 20, textWidth + 10, 20); // 规格内容
        startX += textWidth + 40;
      }
      // storeLogo: { x: 44, y: 1138, w: 48, h: 48, r: 0 },
      // {y: 990, x: 40, w: 80, h: 80}
      console.log(`{ y: baseY + 40, x: commonX, w:80, h:80 }====`, {
        y: baseY + 40,
        x: commonX,
        w: 80,
        h: 80
      });
      // await this.drawImage(myCanvas, this.goodsInfo.remarkLogo, { y: baseY + 40, x: commonX, w:80, h:80 }); //备注图标
      await this.drawImage(myCanvas, this.goodsInfo.remarkLogo, {
        y: baseY + 55,
        x: commonX,
        w: 20,
        h: 20,
        r: 0
      }); // 备注图标
      const remarkX = 30;
      baseY = baseY + this.drawText(myCanvas, remark, remarkX + 40, baseY + 40, 32) + 20; // 备注

      const backLineObj = this.position.backLine;
      myCanvas.fillStyle = "#F3F3F3";
      myCanvas.fillRect(backLineObj.x, baseY + 40, backLineObj.w, backLineObj.h); // 线条 backLineObj.h

      // 底部
      // baseY = baseY + 52;
      // this.position.code.y = baseY;
      await this.drawImage(myCanvas, this.baseUrl + this.goodsInfo.storeLogo, this.position.storeLogo); // 店铺logo
      await this.drawImage(myCanvas, this.baseUrl + codeImage, this.position.code); // 二维码
      // baseY = baseY + 210;
      myCanvas.fillStyle = "#4D546B";
      myCanvas.font = `20px Arial`;
      this.drawText(myCanvas, "扫码查看商品详情", p.desc.x, p.desc.y);

      // this.position.baseY = baseY + 20;
    },
    drawTitle() {}
  },
  computed: {
    goodsInfo() {
      return {
        ...this.info,
        goodsStockVoList: this.goodsStockVoList,
        storeLogo: this.storeLogo
      };
    },
    baseUrl() {
      let url = this.$store.state.config_url.imageUrl;
      if (url) {
        url.charAt(url.length - 1) == "/" && (url = url.substr(0, url.length - 1));
      }
      return url;
    },
    attrList() {
      const res = this.goodsInfo.brandName ? [this.goodsInfo.brandName] : [];
      if (this.goodsInfo.attrCommonVoList && this.goodsInfo.attrCommonVoList.length > 0) {
        const list = this.goodsInfo.attrCommonVoList.map((i) => i.value || "");
        return [...res, ...list];
      }
      return res;
    },
    goodsTypeImage() {
      const imgMap = {
        1: "https://staticcdn.youliao.com/static/image/www_m/member/icon-b.png",
        2: "https://staticcdn.youliao.com/static/image/www_m/member/icon-d.png",
        3: "https://staticcdn.youliao.com/static/image/www_m/member/icon-d.png",
        4: "https://staticcdn.youliao.com/static/image/www_m/member/icon-danger.png"
      };
      return imgMap[this.goodsInfo.type] ? imgMap[this.goodsInfo.type] : null;
    }
  }
};
</script>

<style lang="scss" scoped>
.share {
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2001;
    flex-direction: column;
  }
  .pc-container {
    width: 750rpx;
    margin: 0 auto;
    overflow: hidden;
  }
  .pc-container-image {
    width: 640rpx;
    height: 1100rpx;
    display: block;
    border-radius: 20rpx;
  }
  .btn-box {
    width: 640rpx;
    height: 88rpx;
    margin-top: 14rpx;
    background: #ffffff;
  }
  .b-share {
    font-size: 32rpx;
    color: #242d4a;
    line-height: 88rpx;
    text-align: center;
  }
  .canvas {
    position: absolute;
    right: -2000rpx;
  }
}
</style>
